<template>
  <div v-if="groupList">
      <section class="header">
     <div class="img">
        <img :src="groupList.CoverPhoto" alt />
        <span>{{groupList.pic_group_count}}张照片</span>
     </div>
      <div class="price">
        <p>
          <span>{{groupList.market_attribute.dealer_price}}</span>
          <span>{{groupList.market_attribute.official_refer_price}}</span>
        </p>
        <button>询问底价</button>
      </div>
    </section>  
    <div class="years">
     <span @click="fret(item,index)" 
          v-for="(item,index) in years" 
          :key="item" :class="{'active':activeIndex==index}"
           >{{item}}</span>
    </div>
   <section>
      <div class="list" v-for="(item,index) in list" :key="index">
        <p v-if="item.exhaust_str">
        {{item.exhaust_str+'/'+item.max_power_str+item.inhale_type}}</p>
        <p v-else></p>
        <ul>
          <li tag="li" >
            <p>{{item.market_attribute.year}}款{{item.car_name}}</p>
            <p>{{item.horse_power}}马力{{item.gear_num}}档</p>
            <p>
              <span>指导价{{item.market_attribute.official_refer_price}}</span>
              <span>{{item.market_attribute.dealer_price_min}}起</span>
            </p>
            <button>
              <a :href="item.link">询问底价</a>
              </button>
          </li>
        </ul>
      </div>
    </section>

    <section  class="bottom">
       <span>询问底价</span>
      <span>本地经销商为你报价</span> 
    </section>
      
     

  </div>
</template>

<script>
import { getInfoById } from "../api/brand";

export default {
name:'Details',
data(){
return{
  groupList:'',
  list:'',
  years:[],
  activeIndex: 0
}
},
methods:{
      async init(){
      let SerialID=Number(this.$route.params.id)
      this.groupList = await  getInfoById({SerialID,})
      this.list=this.groupList.list 
      this.list.map((item)=>{
        return  this.years.push(item.market_attribute.year)
      })
      this.years= Array.from(new Set(this.years))
      this.years.splice(0, 0, "全部")
     },
     fret(a,index){
       this.activeIndex=index
       this.list=this.groupList.list 
       if(a=='全部'){return}
        this.list=this.list.filter(function (item) {
          return item.market_attribute.year==a;
          });  
     }
},

created(){
  this.init()
},
mounted(){
}
}

</script>
<style lang="scss" scoped>

    .img{
        position: relative;
        img{
            width: 100%;
            display: block;
        }
        span{
           position: absolute;
            bottom:12px;
            right: 12px;
            color: #fff;
            padding: 1px 2px;
            border-radius: 4px;
            background: rgba(0,0,0,.6);
            font-size: 12px;
        }
    }
    .price{
      display: flex;
      justify-content: space-between;
        p{
          line-height: 12px;
            span:nth-child(1){
                display: block;
                font-size:18px;
                color: red;
                font-weight: 500;
            }
            span:nth-child(2){
                font-size: 14px;
                color: silver;
            }
        }
        button{
            border-radius: 5px;
            font-size: 18px;
            height: 35px;
            width:170px;
            border: none;
            box-sizing: border-box;
            background: #00afff;
            color: #fff;
        }
        padding: 18px 10px 15px;
    }
     .years{
       display: flex;
     }
        .years span{
      font-size:17px;
      padding-right:23px;
      margin-left: 10px;
      line-height:34px;
    }
      .years .active{
      color: #3aacff;
    }
     .list{
      margin-bottom: 1px;
    }
    .list>p{
      padding: 0 10px;
      height: 25px;
      line-height: 25px;
      font-size: 13px;
      color: #999;
      background: #f4f4f4;
    }
    .list li{
        padding: 0 10px;
        overflow: hidden;
        p:first-child{
          padding: 13px 0 9px;
          font-size: 15px;
          line-height: 1;
          color: #3d3d3d;
        }
        p:nth-child(2){
          color: #bdbdbd;
          font-size: 13px;
        }
        p:nth-child(3){
          text-align: right;
            padding-bottom: 5px;
            font-size: 12px;
            color: #818181;
            span:first-child{
              text-align: right;
              padding-bottom: 5px;
              font-size: 12px;
              color: #818181;
            }
            span:last-child{
              font-size: 15px;
              color: #ff2336;
              margin-left: 5px;
            }
        }
        button{
          border: none;
          border-top: 1px solid #eee;
          width: 110%;
          height: 40px;
          font-size: 17px;
          background: #fff;
          font-weight: 500;
          margin-left: -15px;
            a{
              color: #00afff;
            }
        }
    }
    .bottom{
        height: 40px;
        width: 100%;
        position: fixed;
        bottom: 0;
        z-index:99;
        padding-top: 5px;
        padding-bottom:8px;
        display: flex;
        flex-direction: column;
        background: #3aacff;
        color: #fff;
        text-align: center;
        span:first-child{
          font-size: 17px;
          font-weight: 500; 
        }
        span:last-child{
          margin-top: 2px;
          font-size: 12px;
        }
    }
    </style>